<template>
  <div class="overview-container">
    <h2 class="page-title">系统概览</h2>
    <div class="overview">
      <div class="box">
        <div class="inner">
          <h3>设备总数</h3>
          <p>
            <count-to
              :startVal="0"
              :endVal="overview.number"
              :duration="1000"
            />
          </p>
        </div>
      </div>
      <div class="box">
        <div class="inner">
          <h3>设备总金额</h3>
          <p>
            <count-to
              :startVal="0"
              :endVal="overview.amount"
              :duration="1000"
            />
          </p>
        </div>
      </div>
    </div>

    <div class="chart-list clear-fix">
      <chart-box ref="status" />
      <chart-box ref="category" />
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import ChartBox from "@/components/ChartBox.vue";
export default {
  components: {
    CountTo,
    ChartBox,
  },
  data() {
    return {
      overview: {
        number: 0,
        amount: 0,
      },
      timeId: null,
    };
  },
  created() {
    this.getOverview();
    console.log(this.timeId)
  },
  mounted() {
    this.getChartData();

    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getOverview() {
      this.axios.get("/overview").then((data) => {
        console.log("ddd", data);
        if (!data.code) {
          this.overview = data.data;
        }
      });
    },

    getChartData() {
      this.axios.get("/status-overview").then((data) => {
        if (!data.code) {
          // console.log('chart',data.data)
          this.drawStatus(data.data);
        }
      });
      this.axios.get("/category-overview").then((data) => {
        if (!data.code) {
          console.log("zhuzhantu", data);
          this.drawCategory(data.data);
        }
      });
    },
    // 绘制饼图
    drawStatus(data) {
      const config = {
        color: ["#c23431", "#2f4554", "#61a0a8", "#d48265"],
        title: {
          text: "设备状态汇总",
          left: "center",
          top: 20,
          textStyle: {
            fontWeight: "bold",
            color: "#666",
          },
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            data: data.label.map((name, index) => ({
              value: data.value[index],
              name,
            })),
            label: {
              formatter: "{b}: {c}",
            },
            animatinDuration: 1000,
            animationEasing: "cubicInOut",
          },
        ],
      };
      this.$refs.status.draw(config);
    },
    // 绘制柱状图
    drawCategory(data) {
      const config = {
        grid: {
          right: "4%",
          left: "4%",
          bottom: "0%",
          containLabel: true,
        },
        type: "restore",
        color: ["#c23431"],
        title: {
          text: "设备分类汇总",
          left: "center",
          top: 20,
          textStyle: {
            fontWeight: "bold",
            color: "#666",
          },
        },
        xAxis: {
          type: "category",
          data: data.label,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.value,
            type: "bar",
            animatinDuration: 1000,
            animationEasing: "cubicInOut",
          },
        ],
      };

      this.$refs.category.draw(config);
    },
    // 随窗口变化改变
    resize() {
      if (this.timeId) {
        console.log('防抖',this.timeId)
        clearTimeout(this.timeId);
      }
      this.timeId = setTimeout(() => {
        this.$refs.status.resize();
        this.$refs.category.resize();
      }, 200);
    },
  },
};
</script>

<style lang="sass">
.overview-container
  padding: 0 30px
  .box
    display: inline-block
    height: 100px
    border-radius: 8px
    padding: 0 30px 0 90px
    background-repeat: no-repeat
    background-position: 30px center
    background-size: 30px
    // display: flex
    &:first-child
      margin-right: 30px
      background-color: rgba(171, 125, 245, .2)
      background-image: url(~@/assets/img/icon1.png)
      color: #ab7df6
    &:last-child
      background-color: rgba(129, 201, 38, .2)
      background-image: url(~@/assets/img/icon2.png)
      color: #81c926
    .inner
      display: flex
      flex-direction: column
      justify-content: center
      height: 100%
      h3, p
        white-space: nowrap
        text-align: center
      h3
        line-height: 1.2em
        font-size: 16px
      p
        font-size: 36px
        font-weight: 700

  .chart-list
    margin-top: 36px
    .chart-box
      float: left
      height: 420px
      &:first-child
        width: 35%
        margin-right: 3%
      &:last-child
        width: 55%
</style>
